<!-- 司机位置组件 -->
<template>
    <div class='CarTrace'>
        <div ref="qqmap" class="map" id="qqmap"></div>
    </div>
</template>

<script>
import { takeGoodsPosition } from '@/api/waybill.js'
export default {
    //import引入的组件需要注入到对象中才能使用
    components: {},
    props: ['id'],
    data() {
        //这里存放数据
        return {
            form: {

            },
            traceMap: null,
            distance: 0,
        };
    },
    //监听属性 类似于data概念
    computed: {},
    //监控data中的数据变化
    watch: {},
    //方法集合
    methods: {
        async takeGoodsPosition() {
            let res = await takeGoodsPosition({
                id: this.id
            })
            if (res.code === 200) {
                if (!res.data) {
                    this.$message.error('经纬度获取失败!')
                    return;
                }
                this.form = res.data;
                let start = new TMap.LatLng(Number(this.form.startLatitude), Number(this.form.startLongitude)), end = new TMap.LatLng(Number(this.form.lat), Number(this.form.long));
                let path = [start, end];
                let distance = (Math.floor(TMap.geometry.computeDistance(path)) / 1000).toFixed(2);
                this.distance = distance;

            } else {
                this.$message.error('获取数据失败')
            }
        },
        initMap() {
            let center = new TMap.LatLng(39.984104, 116.307503); //设置中心点坐标
            this.traceMap = new TMap.Map(this.$refs.qqmap, {
                center: center,
                mapStyleId: "style1",
                // minZoom: 1, //此处设置地图的缩放级别  最小值是6
                // maxZoom: 20, //此处设置地图的缩放级别  最大值是7
                zoom: 15
            });
            let startPoint = new TMap.LatLng(this.form.startLatitude, this.form.startLongitude);
            let endPoint = new TMap.LatLng(this.form.lat, this.form.long);

            //创建并初始化MultiMarker
            var markerLayer = new TMap.MultiMarker({
                map: this.traceMap,  //指定地图容器
                //样式定义
                styles: {
                    start: new TMap.MarkerStyle({
                        width: 26,
                        height: 40,
                        anchor: { x: 14, y: 36 },
                        src: "https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/start.png",
                    }),
                    end: new TMap.MarkerStyle({
                        width: 25,
                        height: 36,
                        anchor: { x: 12, y: 32 },
                    })
                },
                //点标记数据数组
                geometries: [
                    {
                        "id": "start",   //点标记唯一标识，后续如果有删除、修改位置等操作，都需要此id
                        "styleId": 'start',  //指定样式id
                        "position": startPoint,  //点标记坐标位置
                        "properties": {//自定义属性
                            "title": "marker1"
                        },
                    },
                    {//第二个点标记
                        "id": "end",
                        "styleId": 'end',
                        "position": endPoint,
                        "properties": {
                            "title": "marker2"
                        },
                    },
                ]
            });
            var infoWindow = new TMap.InfoWindow({
                map: this.traceMap,
                position: endPoint, //设置信息框位置
                content: `<div><h3>司机当前位置</h3><p style="color:red">距离发货地 ${this.distance} KM</p></div>
                    `, //设置信息框内容
                zIndex: 10, //信息窗的z-index值
                offset: { x: 0, y: -35 }, //向上偏移35
            });

            var polylineLayer = new TMap.MultiPolyline({
                id: 'polyline-layer', //图层唯一标识
                map: this.traceMap,//设置折线图层显示到哪个地图实例中
                //折线样式定义
                styles: {
                    'style_blue': new TMap.PolylineStyle({
                        'color': '#21b977', //线填充色
                        'width': 8, //折线宽度
                        'borderWidth': 2, //边线宽度
                        'borderColor': '#178153', //边线颜色
                        'lineCap': 'round', //线端头方式
                        'showArrow': true,
                    }),
                },
                //折线数据定义
                geometries: [
                    {//第1条线
                        'id': 'pl_1',//折线唯一标识，删除时使用
                        'styleId': 'style_blue',//绑定样式名
                        'paths': [startPoint, endPoint]
                    },

                ]
            });

            //创建LatLngBounds实例
            var latlngBounds = new TMap.LatLngBounds();
            //将坐标逐一做为参数传入extend方法，latlngBounds会根据传入坐标自动扩展生成
            //将起始点向左偏移一下
            // let boundsPath = [new TMap.LatLng(start.lat, start.lon), endPoint];
            latlngBounds.extend(startPoint);
            latlngBounds.extend(endPoint);

            //调用fitBounds自动调整地图显示范围
            this.traceMap.fitBounds(latlngBounds);

            //设置延迟 为当前显示的轨迹范围加个边距
            setTimeout(() => {
                let currentZoom = this.traceMap.getZoom();
                this.traceMap.setZoom(currentZoom - 0.6);
            }, 500);
        }
    },
    //生命周期 - 创建完成（可以访问当前this实例）
    created() {

    },
    //生命周期 - 挂载完成（可以访问DOM元素）
    async mounted() {

        await this.takeGoodsPosition();
        if (this.form.startLatitude) {
            this.initMap();
        }
    },
    beforeCreate() { }, //生命周期 - 创建之前
    beforeMount() { }, //生命周期 - 挂载之前
    beforeUpdate() { }, //生命周期 - 更新之前
    updated() { }, //生命周期 - 更新之后
    beforeDestroy() { }, //生命周期 - 销毁之前
    destroyed() { }, //生命周期 - 销毁完成
    activated() { }, //如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类
.CarTrace {
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: flex;
}

#qqmap {
    width: 100%;
    height: 100%;
}
</style>